<template>
  <div>
    <Card class="search-condition">
      <Row>
        <Form ref='pageModel' :model="pageModel" label-position="right" inline :label-width='100'>
          <Row>
            <Col span="6">
              <FormItem prop="matchName" label="赛事名称">
                <Input v-model="pageModel.matchName" placeholder="请输入" clearable style="width:200px"></Input>
              </FormItem>
            </Col>
            <Col span="6">
              <FormItem prop="kindCode" label="赛事类型">
                <dict code="ZGX_SSDJ" model="pageModel.kindCode" :value="pageModel.kindCode" @click="getVal" style="width:200px;margin: 5px 0"></dict>
              </FormItem>
            </Col>
            <Col span="6">
              <FormItem prop="startTime" label="赛事开始时间">
                <DatePicker type="date" placeholder="请选择" style="width:200px; " v-model="pageModel.startTime"></DatePicker>
              </FormItem>
            </Col>
            <Col span="6">
              <FormItem prop="endTime" label="赛事结束时间">
                <DatePicker type="date" :options="opEndTime"  placeholder="请选择" style="width:200px;" v-model="pageModel.endTime"></DatePicker>
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="6">
              <FormItem prop="niandu" label="年度">
                <DatePicker type="year" v-model="pageModel.niandu" clearable placeholder="请选择" style="width:200px" @on-change="dateChange"></DatePicker>
              </FormItem>
            </Col>
            <Col span="6">
              <FormItem class="center">
                <Button @click="query" type="primary" class="m-l-sm" icon="md-search">筛选</Button>
                <Button @click="reset" class="m-l-sm" icon="md-sync">重置</Button>
              </FormItem>
            </Col>
          </Row>
        </Form>
      </Row>
    </Card>
    <Card class="m-t-md">
      <Row>
        <Table :loading="loading" :columns="tableColumn" stripe border :data="tableData"></Table>
        <page-temp class="m-t-md" :total="total" :current="pageModel.pageNo" :size="pageModel.pageSize" @changePage="changePage"></page-temp>
      </Row>
    </Card>
  </div>
</template>
<script>
  import dict from '_c/dict/dict.vue';
  import dictSpan from '_c/dict/dict-span.vue';
  import { matchList } from '@/api/applets';
  import { enrollStatusColums } from '@/libs/util';
  import uploadExcel from "_c/upload/upload-excel.vue";
  export default {
    props:["type"],
    components: {
      dict,
      dictSpan,
      uploadExcel
    },
    data() {
      return {
        loading: true,
        total: 0,
        tableColumn: [
          {
            title: "序号",
            width: 80,
            align: "left",
            render: (h, params) => {
              return h(
                "span",
                this.pageModel.pageSize * (this.pageModel.pageNo - 1) + params.index + 1
              );
            }
          },
          {
            title: '赛事名称',
            key: 'matchName'
          },
          {
            title: '赛事类型',
            key: 'kindCode',
            render: (h, params) => {
              return h(dictSpan, {
                props: {
                  code: 'ZGX_SSDJ',
                  value: params.row.isAttestation==='1'?params.row.kindCode:'-'
                }
              });
            }
          },
          {
            title: '年度',
            key: 'niandu'
          },
          {
            title: '赛事时间',
            key: 'startTime',
            render: (h, params) => {
              return h('span',  params.row.startTime +'-'+ params.row.endTime);
            }
          },
          {
            title: '报名人数',
            key: 'countNum',
            render: (h, params) => {
              return h('span', params.row.countNum ? params.row.countNum : 0);
            }
          },
          {
            title: '操作',
            render: (h, params) => {
              let self = this;
              return h('div', [
                h(
                  'Button',
                  {
                    props: { type: 'primary', size: 'small' },
                    style: {marginRight: "5px"},
                    on: {
                      click() {
                        self.$router.push({
                          name:self.type === 'money'?`management-money-detail`:'management-suspension-detail',
                          params:{
                            type:self.type === 'money'?'money-detail':'suspension-detail',
                            id: params.row.matchId
                          }
                        })
                        // self.type === 'money'? self.$router.push('management-detail/money-detail/' + params.row.matchId):self.$router.push('management-detail/suspension-detail/' + params.row.matchId);
                      }
                    }
                  },
                  '查看详情'
                ),
              ]);
            }
          }
        ],
        tableData: [],
        enrollStatusColums:enrollStatusColums,
        pageModel: {
          matchName: null,
          kindCode: null,
          startTime: null,
          endTime: null,
          pageNo: 1,
          pageSize: this.$config.PAGE_SIZE
        },
        opEndTime: {
          disabledDate: date => {
            return (
              date &&
              this.pageModel.startTime &&
              this.pageModel.startTime.valueOf() > date.valueOf()
            );
          }
        },
      };
    },
    mounted() {
      let arr,arrs;
      if(this.type === 'money') {
         arr = {
           title: '缴费人数',
           key: 'payNum',
           render: (h, params) => {
             return h('span',  params.row.payNum ?params.row.payNum:0);
           }
         };
        this.tableColumn.splice(6,0,arr);
        arrs = {
           title: '退费人数',
           key: 'retreatNum',
           render: (h, params) => {
             return h('span',  params.row.retreatNum ?params.row.retreatNum:0);
           }
        }
        this.tableColumn.splice(7,0,arrs);
      }else {
        arr = {
          title: '退费人数',
          key: 'retreatNum',
          render: (h, params) => {
            return h('span',  params.row.retreatNum ?params.row.retreatNum:0);
          }
        }
        this.tableColumn.splice(6,0,arr)
      }


      this.query();
    },
    methods: {
      reset() {
        this.$refs["pageModel"].resetFields();
        this.query()
      },
      getVal(expression) {
        let self = this;
        eval(expression);
      },
      query() {
        this.loading = true;
        this.pageModel.matchName = _.trim(this.pageModel.matchName);
        matchList(this.pageModel)
          .then(data => {
            this.total = data.count || 0;
            this.tableData = data.list || [];
            this.loading = false;
          })
          .catch(error => {
            this.loading = false;
            this.tableData = [];
            this.total = 0;
          });
      },
      changePage(pageNum) {
        this.pageModel.pageNo = pageNum;
        this.query();
      },
      dateChange(date) {
        this.pageModel.niandu = date
      }
    }
  };
</script>

<style scoped>
  .search-condition >>> span{
    margin-top: 0px !important;
    margin-bottom: 0px !important;
  }
</style>
